<template>
  <div>
    <!-- 联系人信息 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">联系人信息</el-button>
      </div>
    </div>

    <div class="title">
      <div class="bottom">
        <!-- from表单 -->
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <div class="information">
            <img src="../../../assets/img/35.png" alt="" />
            <p>关注微信公众号</p>
            <p>免费订阅免费推送</p>
            <p>最新项目信息第一时间掌握</p>
          </div>
          <el-form-item label="登录账号" prop="name"> </el-form-item>

          <el-form-item label="会员级别" prop="name"> </el-form-item>

          <el-form-item label="注册时间" prop="name"> </el-form-item>

          <el-form-item label="会员开通时间" prop="name"> </el-form-item>

          <el-form-item label="会员到期时间" prop="name"> </el-form-item>

          <el-form-item label="用户类型" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择会员类型">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>

          <el-form-item label="公司名称" prop="name">
            <el-input v-model="ruleForm.name" style="width: 300px" />
          </el-form-item>

          <el-form-item label="所在城市" prop="name">
            <el-input v-model="ruleForm.name" class="inp" />
          </el-form-item>

          <el-form-item label="Email" prop="name">
            <el-input v-model="ruleForm.name" class="inp" />
          </el-form-item>

          <el-form-item label="联系人" prop="name">
            <el-input v-model="ruleForm.name" class="inp" />
          </el-form-item>

          <el-form-item label="联系电话" prop="name">
            <el-input v-model="ruleForm.name" class="inp" />
          </el-form-item>

          <el-form-item label="手机号码" prop="name">
            <p>手机号码</p>
          </el-form-item>

          <el-form-item label="公司地址" prop="name">
            <el-input v-model="ruleForm.name" class="inp" />
          </el-form-item>

          <el-form-item label="公司产品" prop="name">
            <el-input v-model="ruleForm.name" class="inp" />
          </el-form-item>

          <!-- 提交 取消 -->
          <el-form-item class="footer">
            <div class="son">
              <el-button type="primary" @click="submitForm()"> 确定 </el-button>
              <el-button @click="resetForm()">取消</el-button>
            </div>
          </el-form-item>

          <!-- 右侧二维码 -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import top from "../../../components/top/top.vue";
import "../../../assets/css/size.css";
const formSize = ref("default");

const ruleForm = reactive({
  name: "",
  region: "",
});
// 表单验证
const rules = reactive({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
  ],
});

// 确定
const submitForm = async () => {};

// 取消
const resetForm = () => {};
</script>
<style>
.el-form-item {
  margin-bottom: 15px;
}
</style>
<style lang="scss" scoped>
.title {
  // width: 1610px;
  // height: calc(100vh - 80px - 60px - 20px);
  background-color: #fff;
  margin: 0 0 10px 10px;
  // overflow: hidden;
  font-size: 14px;
  padding-top: 20px;
  .bottom {
    position: relative;
  }
  .information {
    width: 460px;
    height: 200px;
    text-align: center;
    color: #ff0000;
    position: absolute;
    right: 500px;
    top: 100;

    p {
      width: 460px;
    }
  }
}
.footer {
  // width: 1610px;
  height: 80px;
  background: #ffffff;
  box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  margin-top: 400px;

  .son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
  }
}
</style>
